<html data-layout-decorator="layout/form">
    <div data-layout-fragment="content">
    <form class="layui-form model-form" action="">
            <input name="id" type="hidden" th:value="${info['id']}?:0">
            <input name="pid" id="pid" type="hidden" th:value="${info['pid']}?:0">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">菜单名称：</label>
                    <div class="layui-input-inline">
                        <input name="name" th:value="${info['name']}" lay-verify="required" autocomplete="off" placeholder="请输入菜单名称" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">图标：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="icon" th:value="#{info.icon}" name="icon" lay-filter="icon">
                        <style type="text/css">
                            .layui-iconpicker .layui-anim {
                            display: none;
                            position: absolute;
                            left: 0;
                            top: 42px;
                            padding: 5px 0;
                            z-index: 899;
                            min-width: 150% !important;
                            border: 1px solid #d2d2d2;
                            max-height: 300px;
                            overflow-y: auto;
                            background-color: #fff;
                            border-radius: 2px;
                            box-shadow: 0 2px 4px rgba(0,0,0,.12);
                            box-sizing: border-box;
                        }
                    </style>
                        <script th:inline="javascript" type="text/javascript">
                        layui.use(['iconPicker'], function () {
                        var iconPicker = layui.iconPicker;

                        iconPicker.render({
                            // 选择器，推荐使用input
                            elem: '#icon',
                            // 数据类型：fontClass/unicode，推荐使用fontClass
                            type: 'fontClass',
                            // 是否开启搜索：true/false，默认true
                            search: true,
                            // 是否开启分页：true/false，默认true
                            page: true,
                            // 每页显示数量，默认12
                            limit: 12,
                            // 点击回调
                            click: function (data) {
                                console.log(data);
                            },
                            // 渲染成功后的回调
                            success: function(d) {
                                console.log(d);
                            }
                        });
                        /**
                         * 选中图标 （常用于更新时默认选中图标）
                         * @param filter lay-filter
                         * @param iconName 图标名称，自动识别fontClass/unicode
                         */
                        iconPicker.checkIcon('icon', 'layui-icon-home')
                    });
                    </script>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">URL地址：</label>
                    <div class="layui-input-inline">
                        <input name="url" th:value="${info['url']}" lay-verify="required" autocomplete="off" placeholder="请输入URL地址" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">参数：</label>
                    <div class="layui-input-inline">
                        <input name="param" th:value="${info['param']}" lay-verify="" autocomplete="off" placeholder="请输入参数" class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">类型：</label>
                    <div class="layui-input-inline">
                        <select name="type" id="type" lay-verify="required" lay-search="" lay-filter="type" th:switch="${info['type']}">
                            <option value="">【请选择菜单类型】</option>
                            <option value="1" th:selected="${info['type']}==1">模块</option>
                            <option value="2" th:selected="${info['type']}==2">导航</option>
                            <option value="3" th:selected="${info['type']}==3">菜单</option>
                            <option value="4" th:selected="${info['type']}==4">节点</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">上级菜单：</label>
                    <div class="layui-input-inline">
                        <select name="pid" id="pid">
                            <option value="0" th:selected="${info['pid']}==0">【请选择上级菜单】</option>
                            <option th:each="item:${menuList}" th:value="${item.id}" th:text="${item.name}"  th:selected="${item.id ==info['pid']}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" th:if="${info['type']}==3">
                <label class="layui-form-label">菜单节点：</label>
                <div class="layui-input-block">
                    <input name="funcIds[1]" lay-skin="primary" th:checked="${#lists.contains(typeList,1)}" title="列表" type="checkbox">
                    <input name="funcIds[2]" lay-skin="primary" th:checked="${#lists.contains(typeList,2)}" title="添加" type="checkbox">
                    <input name="funcIds[3]" lay-skin="primary" th:checked="${#lists.contains(typeList,3)}" title="修改" type="checkbox">
                    <input name="funcIds[4]" lay-skin="primary" th:checked="${#lists.contains(typeList,4)}" title="删除" type="checkbox">
                    <input name="funcIds[5]" lay-skin="primary" th:checked="${#lists.contains(typeList,5)}" title="状态" type="checkbox">
                    <input name="funcIds[6]" lay-skin="primary" th:checked="${#lists.contains(typeList,6)}" title="批量删除" type="checkbox">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">权限标识：</label>
                    <div class="layui-input-inline">
                        <input name="permission" th:value="${info['permission']}" lay-verify="" autocomplete="off" placeholder="请输入权限标识" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">显示顺序：</label>
                    <div class="layui-input-inline">
                        <input name="sort" th:value="${info['sort']}" lay-verify="required|number" autocomplete="off" placeholder="请输入显示顺序" class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">是否显示：</label>
                    <div class="layui-input-inline">
                        <input name="status" id="status" th:value="${info['status']}?1" lay-skin="switch" lay-filter="status" lay-text="显示|不显示" type="checkbox"checked="">
                        <script th:inline="javascript" type="text/javascript">layui.use(['form'], function(){
                        var form = layui.form,
                            $ = layui.$;

                        if (1 == 1) {
                            $("#status").attr('type', 'hidden').val(1);
                        } else {
                            $("#status").attr('type', 'hidden').val(2);
                        }
                        form.on('switch(status)', function(data) {
                            console.log('switch开关选择状态：'+this.checked);
                            $(data.elem).attr('type', 'hidden').val(this.checked ? 1 : 2);
                        });
                    });</script>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">是否公共：</label>
                    <div class="layui-input-inline">
                        <widget:switchCheck name="isPublic" data="是|否" th:value="${info['isPublic']} ?: 2"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单备注：</label>
                <div class="layui-input-block">
                    <textarea name="note" placeholder="请输入菜单备注" class="layui-textarea" th:text="${info['note']}"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-center model-form-footer">
                <button class="layui-btn" lay-filter="submitForm" lay-submit>立即保存</button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
            </div>
        </form>
    </div>
</html>